<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
    </table-ext>
    <Npc-task-dialog ref="openTaskDialog" :itemCloseStatus="itemCloseStatus" :itemVendorId="itemVendorId">
    </Npc-task-dialog>
     <!-- 关闭打样明细dialog -->
    <el-dialog title="关闭打样" :visible.sync="closeDialogVisible">
      <el-form :model="closeForm">
        <el-form-item label="关闭原因" label-width="100px">
          <el-input type="textarea" v-model="closeForm.closeReason" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClose(closeForm)">提交</el-button>
        <el-button @click="closeDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import TableIcon from '@/components/common/table-ext/table-icon';
  import NpcTaskDialog from './npcTaskDialog.vue';
  export default {
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt,
       NpcTaskDialog
    },
    data() {
      return {
        itemVendorId:'',
        // 关闭打样Form
        closeForm:{
          id:''
        },
        // 关闭打样dialog是否显示控制
        closeDialogVisible:false,
        itemCloseStatus:0,
        config:{ // 页面共通配置
          title: '物料打样明细', //页面标题
          isPage: true, //是否分页
          isNo: true, //是否显示序号
          selection: false, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.vendorDlv + "/vendormgt/npc/npcTaskItemVendor/query",
            }
          }
        },
         // 查询表单配置
        searchForm:[{
          label: '采购组织',
          key: 'orgId',
          type: 'select',
          dict: {
            url: this.lib.config.host.masterData + '/system/purOrgMgt/purOrg/getPurOrgByUserId/' + this.getCurrUserId(),
            method: 'get',
            label: 'purOrgName',
            value: 'id'
          }
        },{
          label: '采购组',
          key: 'groupId',
          type: 'select',
          dict: {
            url: this.lib.config.host.masterData + '/mdata/purOrgMgt/purGroup/getByPurOrgId/{orgId}',
            method: 'post',
            label: 'purGroupName',
            value: 'id'
          }
        },{
          label: '工厂:',
          key: 'factoryId',
          type: 'select',
          dict: {
            url:  this.lib.config.host.masterData + '/system/factoryMgt/factorys/getFactoryByPurId/{orgId}',
            method: 'post',
            label: 'factoryName',
            value: 'factoryId'
          }
        },{
          label: '任务编码',
          key: 'taskCode',
          type: 'input'
        },{
          label: '任务名称',
          key: 'taskName',
          type: 'input'
        },{
          label: '项目名称',
          key: 'projectName',
          type: 'input'
        },{
          label: '供应商编码',
          key: 'vendorCode',
          type: 'input'
        },{
          label: '供应商名称',
          key: 'vedorName',
          type: 'input',
        },{
          label: '物料编码',
          key: 'materialCode',
          type: 'input'
        },{
          label: '物料名称',
          key: 'materialName',
          type: 'input'
        },{
          label: '确认状态',
          key: 'confirmStatus',
          type: 'select',
          dict: [{
            key: '0',
            value: '未确认'
          },{
            key: '1',
            value: '已确认'
          },{
            key: '2',
            value: '部分确认'
          }]
        },{
          label: '打样状态',
          key: 'completeStatus',
          type: 'select',
          dict: [{
            key: '0',
            value: '未完成'
          },{
            key: '1',
            value: '已完成'
          },{
            key: '2',
            value: '部分完成'
          }]
        }],
        // 表格列定义
        columns:[{ 
          label: '操作', // 表格header
          align: 'center',
          width: '200px',
          render:(createElement, params)=>{ // 动态渲染，click事件示例
            let _this = this;
            return createElement('div', {}, 
            [createElement('el-button', {
                props: {
                  type: 'text',
                },
                on: {
                  click:() =>{
                    this.$refs.openTaskDialog.dialogFormVisible = true;
                    this.$refs.openTaskDialog.nodeQuery(params.row.id);
                    this.itemVendorId = itemVendorId;
                  }
                }
            }, '进度跟踪'),
            // createElement('el-button', {
            //     props: {
            //       type: 'text',
            //     },
            //     on: {
            //       click:() =>{
            //         this.$refs.openTaskDialog.dialogFormVisible = true;
            //       }
            //     }
            // }, '编辑'),
            createElement('el-button', {
                props: {
                  type: 'text',
                },
                on: {
                  click:() =>{
                     this.openCloseDialog(params.row.id);
                  }
                }
              }, '关闭'),
            ]);
          }
        },{
          label: '采购组织',
          key: 'purOrgName',
          align: 'center',
          width: '150px'
        },{
          label: '采购组',
          key: 'purGroupName',
          align: 'center',
          width: '150px'
        },{
          label: '工厂',
          key: 'factoryName',
          align: 'center',
          width: '150px'
        },{
          label: '任务编码',
          key: 'taskCode',
          align: 'center',
          width: '200px'
        },{
          label: '任务名称',
          key: 'taskName',
          align: 'center',
          width: '200'
        },{
          label: '物料编码',
          key: 'npcTaskItem.materialNo',
          align: 'center',
          width: '200px'
        },{
          label: '物料名称',
          key: 'npcTaskItem.materialName',
          align: 'center',
          width: '250px'
        },{
          label: '供应商编码',
          key: 'vendorCode',
          align: 'center',
          width: '200px'
        },{
          label: '供应商名称',
          key: 'vendorName',
          align: 'center',
          width: '250px'
        },{
          label: '当前节点',
          key: 'currentNodeType',
          align: 'center',
          width: '100px'
        },{
          label: '确认状态',
          key: 'confirmStatus',
          align: 'center',
          width: '200px',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
              flag: params.row.confirmStatus,
              titles: [{status:0,title:'未确认'},{status:1,title:'已确认'}]
            }});
          }
        },{
          label: '驳回原因',
          key: 'rejectReason',
          align: 'center',
          width: '200px'
        },{
          label: '确认日期',
          key: 'confirmTime',
          align: 'center',
          width: '150px'
        },{
          label: '确认人',
          key: 'confirmUserName',
          align: 'center',
          width: '150px'
        },{
          label: '打样数量',
          key: 'sampleNumber',
          align: 'center',
          width: '100px'
        },{
          label: '计量单位',
          key: 'unit',
          align: 'center',
          width: '100px'
        },{
          label: '要求完成期',
          key: 'requireTime',
          align: 'center',
          width: '150px'
        },{
          label: '完成状态',
          key: 'completeStatus',
          align: 'center',
          width: '100px',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
              flag: params.row.completeStatus,
              titles: [{status:0,title:'未完成'},{status:1,title:'已完成'},{status:2,title:'部分完成'}]
            }});
          }
        },{
          label: '打样次数',
          key: 'sampleCount',
          align: 'center',
          width: '100px'
        },{
          label: '关闭状态',
          key: 'closeStatus',
          align: 'center',
          width: '100px',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
              flag: params.row.closeStatus,
              titles: [{status:0,title:'未关闭'},{status:1,title:'已关闭'}]
            }});
          }
        },{
          label: '关闭原因',
          key: 'closeReason',
          align: 'center',
          width: '200px'
        }]
      };
    },
    mounted() {

    },
    methods: {
      //处理附件上传异常
      handleExceed(files, fileList){
        console.log(files);
        console.log(fileList);
      },
      // 打开关闭打样dialog
      openCloseDialog(id){
        this.closeDialogVisible = true;
        this.closeForm.id = id;
      },
      // 提交关闭
      submitClose(closeForm) {
        this.closeDialogVisible = false;
        this.axios.post(this.lib.config.host.vendorDlv + "/vendormgt/npc/npcTaskItemVendor/closeNpcItemVendor", closeForm)
          .then((response)=>{
             this.itemCloseStatus = 1;
          })
          .catch((error)=>{
            console.log(error);
          });
      }
    }
  }
</script>
